<template>
  <section class="demo">
    <Table :search-options="searchOptions" :tableDatas="list" :loading="loading" :pages="pages" :total="total"
      :columns="columns" @search="handleSearch" @delete="handleDel" @editor="handleEditor">
      <template #searchOptLeft>
        <a-button type="primary" @click="visible = true">
          添加
        </a-button>
      </template>
      <template #matainer="{ row }">
        <a-tooltip placement="bottom">
          <span>{{
            row.matainer ? `${row.matainer.split(',')[0]}...` : '--'
          }}</span>
          <template #title>
            <div v-if="row.matainer" slot="content">
              <div v-for="(user, index) in row.matainer.split(',')" :key="index">
                {{ user }}
              </div>
            </div>
          </template>
        </a-tooltip>
      </template>
    </Table>
    <Dialog v-model:visible="visible" />
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Table from '@/components/Table/index.vue';
import { queryMenus, DeleteMenu, queryPageMenus } from '@/api/setting'
import Dialog from './add-dialog.vue'
import { provide } from "vue";
let pages = ref<object>({ pageSize: 30, pageNo: 1 });
let total = ref(20)
provide("page", pages);
let list = ref<object>([]);
let loading = ref<boolean>(false);
let visible = ref(false)
const columns = ref<object>([
  { title: 'ID', dataIndex: 'app', align: 'center', width: 40 },
  { title: 'menu name', dataIndex: 'nameZh', align: 'center' },
  { title: 'path', dataIndex: 'path', align: 'center' },
  { title: 'remark', dataIndex: 'remark', align: 'center' },
  { title: '操作', slot: 'opt', dataIndex: 'opt', align: 'center', edit: true, delete: true,width: 80 }
]);
let searchOptions = ref([
  {
    prop: 'keyword',
    label: 'SN号',
    type: 'inputSearch',
    default: '',
    attrs: {
      clearable: true,
    },
  },
]);
const handleSearch = async ({ searchForm, pager }: any) => {
  let requestData = {
    ...searchForm,
    ...pager
  }
  loading.value = true
  const { data, totalCount, pageSize, pageNo } = await queryPageMenus(requestData).finally(() => {
    loading.value = false
  })
  total.value = totalCount
  list.value = data
  pages.pageSize = pageSize
  pages.pageNo = pageNo
}
const handleDel = (row) => {
  // consolelog('最外层Del', row);
};
const handleEditor = (row) => {
  // consolelog('最外层Edit', row);
};
onMounted(() => {
  handleSearch({ "keyword": "" }, { "pageSize": 10, "pageNo": 1 })
})
</script>

<style lang="scss" scoped></style>